import React from "react";
import BraftEditor from "braft-editor";
import "braft-editor/dist/index.css";


export default class Editor extends React.Component {
  state = {
    // 创建一个空的editorState作为初始值
    editorState: BraftEditor.createEditorState(null),
  };

  async componentDidMount() {
    var _self = this;
    this.setState({
      editorState: BraftEditor.createEditorState(this.props.defaultValue),
    });
  }
  render() {
    const { editorState } = this.state;
    const controls = [
      "undo",
      "redo",
      "separator",
      "font-size",
      "line-height",
      "letter-spacing",
      "headings",
      "separator",
      "text-color",
      "bold",
      "italic",
      "underline",
      "strike-through",
      "separator",
      "superscript",
      "subscript",
      "remove-styles",
      "emoji",
      "separator",
      "text-indent",
      "text-align",
      "separator",
      "list-ul",
      "list-ol",
      "blockquote",
      "code",
      "separator",
      "link",
      "separator",
      "hr",
      "separator",
      "media",
      "separator",
      "clear",
    ];

    return (
      
      <div
        style={{
          width: "this.props.width",
          // height: this.props.height || "400px",
          // display: "inline-block",
          boxSizing: "border-box",
          // padding: "10px",
          // margin: "10px",
          lineHeight: "24px",
          border:"1px solid #ddd"
          // boxShadow: "0 0 10px 10px #ddd",
          // borderRadius: "8px",
        }}
      >
        <BraftEditor
          // contentStyle={{ height:this.props.height? "calc(this.props.height - 100px )" : "300px" }}
          readOnly={this.props.readOnly||false}
          defaultValue={this.props.defaultValue}
          value={editorState}
          onChange={this.handleChange}
          controls={controls}
          onSave={() => this.props.submitContent(editorState)}
        />
      </div>
    );
  }
  handleChange = (editorState) => {
    const htmlString = editorState.toHTML();
    this.setState({ editorState: editorState }, () => {
      this.props.onChange(htmlString);
    });
  };
}
